<template>
    <div style="height: 400px;">
        <el-tabs type="border-card" class="demo-tabs">
            <el-tab-pane label="延期" style="height: 100%;">
                <ElTable height="100%" :data="postponelist">
                    <ElTableColumn prop="UserName" label="申请人"></ElTableColumn>
                    <ElTableColumn prop="Desc" label="申请原因"></ElTableColumn>
                    <ElTableColumn prop="PostponeTime" label="延期时间"></ElTableColumn>
                    <ElTableColumn prop="Status" label="状态">
                        <template #default="scoped">
                            {{ IsStatus(scoped.row.Status) }}
                        </template>
                    </ElTableColumn>
                    <ElTableColumn prop="CrateTime" label="申请时间"></ElTableColumn>
                    <ElTableColumn label="操作" fixed="right">
                        <template #default="scoped">
                            <ElButton v-if="scoped.row.Status == 1" size="small" type="primary" link  @click="MyOk(scoped.row)" >同意</ElButton>
                            <ElButton v-if="scoped.row.Status == 1" size="small" type="danger" link @click="MyOne(scoped.row)" >拒绝</ElButton>
                        </template>
                    </ElTableColumn>
                </ElTable>
            </el-tab-pane>
            <el-tab-pane label="转移" style="height: 100%;">
                <ElTable height="100%" :data="Transferlist">
                    <ElTableColumn prop="UserName" label="申请人"></ElTableColumn>
                    <ElTableColumn prop="Desc" label="申请原因"></ElTableColumn>
                    <ElTableColumn prop="UnderUserName" label="被转移人"></ElTableColumn>
                    <ElTableColumn prop="Status" label="状态">
                        <template #default="scoped">
                            {{ IsStatus(scoped.row.Status) }}
                        </template>
                    </ElTableColumn>
                    <ElTableColumn prop="CrateTime" label="申请时间"></ElTableColumn>
                    <ElTableColumn label="操作" fixed="right">
                        <template #default="scoped">
                            <ElButton v-if="scoped.row.Status == 1" size="small" type="primary" link @click="transferOk(scoped.row)" >同意</ElButton>
                            <ElButton v-if="scoped.row.Status == 1" size="small" type="danger" link @click="transferNoe(scoped.row)" > 拒绝</ElButton>
                        </template>
                    </ElTableColumn>
                </ElTable>
            </el-tab-pane>

        </el-tabs>
    </div>
</template>

<script setup lang="ts">
import taskPostponeapi from '@/api/taskPostponeapi';
import taskTransferapi from '@/api/taskTransferapi';
import { ElButton, ElMessage, ElMessageBox, ElTable, ElTableColumn } from 'element-plus';
import { onMounted, ref } from 'vue';

const props = defineProps({
    Id:Number
})
const postponelist = ref();
const Transferlist = ref();

const getpostopne = ()=>{
    taskPostponeapi.projectget({ProjectId:props.Id}).then(res=>{
        console.log(res)
        postponelist.value = res.data
    }).catch(err=>{
        console.log(err)
    })
}
const gettransfer =()=>{
    taskTransferapi.projectget({ProjectId:props.Id}).then(res=>{
        //console.log(res)
        Transferlist.value = res.data
    }).catch(err=>{
        console.log(err)
    })
}
//转移同意
const transferOk =(row:any)=>{
    ElMessageBox.confirm("请问确定同意吗?",
        {
            confirmButtonText:"确定",
            cancelButtonText:"取消"
        }
    ).then(()=>{
        row.Status = 2;
        taskTransferapi.IsOk(row).then(res=>{
            ElMessage.success("操作完成")
            getpostopne()
        }).catch(err=>{
            console.log(err)
        })
    }).catch(()=>{})
}
//转移拒绝
const transferNoe = (row:any)=>{
    ElMessageBox.confirm("请问确定拒绝吗?",
        {
            confirmButtonText:"确定",
            cancelButtonText:"取消"
        }
    ).then(()=>{
        row.Status = 0;
        taskTransferapi.IsOk(row).then(res=>{
            ElMessage.success("操作完成")
            getpostopne()
        }).catch(err=>{
            console.log(err)
        })
    }).catch(()=>{})
}



//同意
const MyOk = (row:any)=>{
    ElMessageBox.confirm("请问确定同意吗?",
        {
            confirmButtonText:"确定",
            cancelButtonText:"取消"
        }
    ).then(()=>{
        row.Status = 2;
        taskPostponeapi.IsOk(row).then(res=>{
            ElMessage.success("操作完成")
            getpostopne()
        }).catch(err=>{
            console.log(err)
        })
    }).catch(()=>{})
}
//拒绝
const MyOne =(row:any)=>{
    ElMessageBox.confirm("请问确定拒绝吗?",
        {
            confirmButtonText:"确定",
            cancelButtonText:"取消"
        }
    ).then(()=>{
        row.Status = 0;
        taskPostponeapi.IsOk(row).then(res=>{
            ElMessage.success("操作完成")
            getpostopne()
        }).catch(err=>{
            console.log(err)
        })
    }).catch(()=>{})
}
/**
 * 判断状态
 * @param status 
 */
 const IsStatus = ((status: any) => {
    let statustext = "未审核"
    switch (status) {
        case 0:
            statustext = "拒绝"
            break;
        case 2:
            statustext = "通过"
            break;
    }
    return statustext
})
onMounted(()=>{
    getpostopne()
    gettransfer()
})
</script>

<style scoped>
/* 固定tabs的label */
.demo-tabs {
    flex: auto;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.demo-tabs:deep(.el-tabs__content) {
    flex-grow: 1;
    overflow-y: scroll;
}
</style>